<template>
	<view class="container">
		<!-- 顶部操作栏 -->
		<view class="header-section">
			<view class="header-info">
				<text class="header-title">课程安排管理</text>
				<text class="header-subtitle">管理每周课程安排图片</text>
			</view>
			<view class="header-actions">
				<button class="upload-btn" @click="showUploadModal">上传图片</button>
				<button class="refresh-btn" @click="loadCourseList">刷新</button>
			</view>
		</view>

		<!-- 筛选栏 -->
		<view class="filter-section">
			<view class="filter-item">
				<text class="filter-label">班级筛选：</text>
				<picker @change="onClassChange" :value="selectedClassIndex" :range="classOptions" range-key="name">
					<view class="picker-display">
						{{ selectedClassIndex >= 0 ? classOptions[selectedClassIndex].name : '全部班级' }}
					</view>
				</picker>
			</view>
		</view>

		<!-- 课程安排列表 -->
		<view class="course-list">
			<view class="list-header">
				<text class="list-title">课程安排列表</text>
				<text class="list-count">共 {{ courseList.length }} 周</text>
			</view>
			
			<view v-if="!loading && courseList && courseList.length > 0">
				<view class="course-item" v-for="course in courseList" :key="course.id">
					<view class="course-header">
						<view class="course-info">
							<text class="course-week">{{ formatWeekDisplay(course.week) }}</text>
							<text class="course-time">{{ formatDateTime(course.uploadTime) }}</text>
							<text class="course-class" v-if="course.className">班级：{{ course.className }}</text>
						</view>
						<view class="course-actions">
							<button class="action-btn preview-btn" @click="previewImage(course)" v-if="getImageUrl(course.imageUrl)">预览</button>
							<button class="action-btn edit-btn" @click="editCourse(course)">编辑</button>
							<button class="action-btn delete-btn" @click="deleteCourse(course.id)">删除</button>
						</view>
					</view>
					
					<view class="course-preview">
						<image v-if="getImageUrl(course.imageUrl)" class="course-image" :src="getImageUrl(course.imageUrl)" mode="aspectFit" @click="previewImage(course)" @error="onImageError"></image>
						<view v-else class="no-image">
							<text class="no-image-text">暂无图片</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 加载状态 -->
			<view v-else-if="loading" class="loading-state">
				<text class="loading-text">加载中...</text>
			</view>
			
			<!-- 空状态 -->
			<view v-else class="empty-state">
				<view class="empty-icon">📚</view>
				<text class="empty-title">暂无课程安排</text>
				<text class="empty-desc">点击"上传图片"添加课程安排</text>
			</view>
		</view>

		<!-- 上传图片弹窗 -->
		<view class="modal-overlay" v-if="showModal" @click="closeUploadModal">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<text class="modal-title">{{ isEdit ? '编辑课程安排' : '上传课程安排' }}</text>
					<view class="close-btn" @click="closeUploadModal">
						<text class="close-icon">×</text>
					</view>
				</view>

				<view class="modal-body">
					<!-- 日期选择 -->
					<view class="form-item">
						<text class="label">日期时间 *</text>
						<picker 
							mode="date" 
							:value="formData.dateStr" 
							@change="onDateChange"
							:start="minDate"
						>
							<view class="date-picker">
								{{ formData.dateStr || '请选择日期' }}
							</view>
						</picker>
						<text class="form-tip">选择课程安排所属的日期</text>
					</view>

					<!-- 班级选择 -->
					<view class="form-item">
						<text class="label">所属班级 *</text>
						<picker @change="onFormClassChange" :value="formData.classIndex" :range="classOptions" range-key="name">
							<view class="picker-display">
								{{ formData.classIndex >= 0 ? classOptions[formData.classIndex].name : '请选择班级' }}
							</view>
						</picker>
					</view>

					<!-- 图片上传 -->
					<view class="upload-section">
						<text class="section-title">课程安排图片 *</text>
						<view class="upload-area" @click="chooseImage" v-if="!formData.imageUrl">
							<text class="upload-icon">📷</text>
							<text class="upload-text">点击选择图片</text>
							<text class="upload-tip">建议尺寸: 42cmx59.4cm</text>
						</view>
						<view class="image-preview" v-else>
							<image class="preview-image" :src="getImageUrl(formData.imageUrl)" mode="aspectFit" @error="onImageError"></image>
							<view class="image-actions">
								<button class="change-btn" @click="chooseImage">更换图片</button>
							</view>
						</view>
					</view>
				</view>

				<view class="modal-footer">
					<button class="cancel-btn" @click="closeUploadModal">取消</button>
					<button class="submit-btn" @click="submitForm" :disabled="submitting">
						{{ submitting ? '提交中...' : '确定' }}
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { API_CONFIG, getApiUrl, apiRequest } from '@/config/api.js'

export default {
	data() {
		return {
			loading: false,
			submitting: false,
			showModal: false,
			isEdit: false,
			editingId: null,
			selectedClassIndex: -1, // -1 表示全部班级
			formData: {
				dateStr: '',
				imageUrl: '',
				classIndex: -1,
				classId: null
			},
			courseList: [],
			classOptions: [], // 班级选项
			minDate: '2020-01-01', // 最小日期
		}
	},
	onLoad() {
		this.loadData()
	},
	methods: {
		// 统一数据加载方法
		async loadData() {
			// 先加载班级列表，再加载课程列表
			await this.loadClassList()
			await this.loadCourseList()
		},

		// 加载班级列表
		async loadClassList() {
			try {
				const token = uni.getStorageSync('token')
				const response = await apiRequest({
					url: getApiUrl(API_CONFIG.ENDPOINTS.COURSE_CLASS_LIST),
					method: 'GET',
					header: {
						'Authorization': token,
						'Content-Type': 'application/json'
					}
				})

				if (response.code === 200) {
					// 将后端返回的班级数据转换为前端需要的格式
					this.classOptions = response.data.map(classItem => ({
						id: classItem.id,
						name: classItem.className
					}))
				} else {
					throw new Error(response.message || '获取班级列表失败')
				}
			} catch (error) {
				console.error('加载班级列表失败:', error)
				uni.showToast({
					title: '加载班级失败',
					icon: 'none'
				})
				// 如果API调用失败，使用默认数据作为备选
				this.classOptions = [
					{ id: 1, name: '综合班' },
					{ id: 2, name: '进阶班' },
					{ id: 3, name: '冲刺班' }
				]
			}
		},

		// 加载课程安排列表
		async loadCourseList() {
			this.loading = true
			try {
				const token = uni.getStorageSync('token')
				let url
				
				// 如果选择了特定班级，按班级查询
				if (this.selectedClassIndex >= 0) {
					const classId = this.classOptions[this.selectedClassIndex].id
					url = `${getApiUrl(API_CONFIG.ENDPOINTS.COURSE_SCHEDULE_QUERY_BY_CLASS)}?classId=${classId}`
				} else {
					// 查询全部课程安排
					url = getApiUrl(API_CONFIG.ENDPOINTS.COURSE_SCHEDULE_ALL)
				}

				const response = await apiRequest({
					url: url,
					method: 'GET',
					header: {
						'Authorization': token,
						'Content-Type': 'application/json'
					}
				})

				if (response.code === 200) {
					// 确保classOptions已加载完成再映射班级名称
					if (this.classOptions.length === 0) {
						await this.loadClassList()
					}
					
					// 为每个课程安排添加班级名称并处理图片URL
					this.courseList = response.data.map(course => {
						console.log('课程数据:', course)
						console.log('图片URL:', course.imageUrl)
						console.log('图片URL类型:', typeof course.imageUrl)
						
						// 处理图片URL
						let imageUrl = course.imageUrl
						
						// 如果是对象类型，直接设置为空字符串
						if (typeof imageUrl === 'object' && imageUrl !== null) {
							console.warn('图片URL是对象类型，设置为空字符串:', imageUrl)
							imageUrl = ''
						}
						
						// 如果是字符串类型，检查是否是临时路径
						if (typeof imageUrl === 'string' && imageUrl) {
							if (imageUrl.includes('tmp/') || imageUrl.includes('http://tmp/') || imageUrl.includes('__tmp__/')) {
								console.warn('检测到临时路径图片URL，设置为空字符串:', imageUrl)
								imageUrl = ''
							}
						}
						
						return {
							...course,
							imageUrl: imageUrl,
							className: this.getClassNameById(course.classId)
						}
					})
				} else {
					throw new Error(response.message || '获取课程安排失败')
				}
			} catch (error) {
				console.error('加载课程安排失败:', error)
				uni.showToast({
					title: error.message || '加载失败',
					icon: 'none'
				})
				this.courseList = []
			} finally {
				this.loading = false
			}
		},

		// 根据班级ID获取班级名称
		getClassNameById(classId) {
			if (!classId) {
				console.warn('班级ID为空:', classId)
				return '未知班级'
			}
			
			const classItem = this.classOptions.find(item => item.id === classId)
			if (!classItem) {
				console.warn('未找到班级ID对应的班级:', classId, '可用班级:', this.classOptions)
				return `未知班级(ID:${classId})`
			}
			
			return classItem.name
		},

		// 班级筛选改变
		onClassChange(e) {
			this.selectedClassIndex = parseInt(e.detail.value)
			this.loadCourseList()
		},

		// 表单班级选择改变
		onFormClassChange(e) {
			const index = parseInt(e.detail.value)
			this.formData.classIndex = index
			this.formData.classId = index >= 0 ? this.classOptions[index].id : null
		},

		// 日期选择改变
		onDateChange(e) {
			this.formData.dateStr = e.detail.value
		},

		// 格式化日期时间显示
		formatDateTime(dateTime) {
			if (!dateTime) return ''
			const date = new Date(dateTime)
			return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
		},

		// 格式化周次显示
		formatWeekDisplay(weekDate) {
			if (!weekDate) return ''
			const date = new Date(weekDate)
			const year = date.getFullYear()
			const weekNumber = this.getWeekOfYear(date)
			return `${year}年第${weekNumber}周`
		},

		// 获取年份中的第几周
		getWeekOfYear(date) {
			const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
			const dayNum = d.getUTCDay() || 7
			d.setUTCDate(d.getUTCDate() + 4 - dayNum)
			const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1))
			return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
		},

		// 格式化日期时间为API需要的格式
		formatDateTimeForApi(date) {
			if (!date) return ''
			const d = new Date(date)
			// 使用ISO格式，iOS兼容
			return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}T${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`
		},

		// 显示上传弹窗
		showUploadModal() {
			this.isEdit = false
			this.editingId = null
			this.resetForm()
			this.showModal = true
		},

		// 关闭上传弹窗
		closeUploadModal() {
			this.showModal = false
			this.resetForm()
		},

		// 重置表单
		resetForm() {
			this.formData = {
				dateStr: '',
				imageUrl: '',
				classIndex: -1,
				classId: null
			}
		},

		// 选择图片
		async chooseImage() {
			try {
				const res = await new Promise((resolve, reject) => {
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'],
						sourceType: ['album', 'camera'],
						success: resolve,
						fail: reject
					})
				})

				// 显示上传进度
				uni.showLoading({
					title: '上传中...'
				})

				// 上传图片到服务器
				let uploadRes
				try {
					// 首先尝试使用课程图片上传接口
					uploadRes = await new Promise((resolve, reject) => {
						uni.uploadFile({
							url: getApiUrl(API_CONFIG.ENDPOINTS.UPLOAD_COURSE),
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
								'Authorization': uni.getStorageSync('token')
							},
							success: (uploadResult) => {
								try {
									const data = JSON.parse(uploadResult.data)
									console.log('上传响应原始数据:', uploadResult.data)
									console.log('解析后的数据:', data)
									if (data.code === 200) {
										console.log('上传成功，返回的data字段:', data.data)
										// 直接返回整个data.data对象，让后续代码处理
										resolve(data.data)
									} else {
										reject(new Error(data.message || '上传失败'))
									}
								} catch (e) {
									console.error('解析上传响应失败:', e)
									reject(new Error('解析响应失败'))
								}
							},
							fail: reject
						})
					})
				} catch (e) {
					console.log('图片上传接口失败:', e.message)
					throw e
				}

				// 设置图片URL为服务器返回的URL
				console.log('上传成功，返回的图片URL:', uploadRes)
				console.log('返回的图片URL类型:', typeof uploadRes)
				
				// 处理返回的数据格式
				let finalImageUrl = ''
				if (typeof uploadRes === 'string') {
					// 如果直接返回字符串URL
					finalImageUrl = uploadRes
				} else if (typeof uploadRes === 'object' && uploadRes !== null) {
					// 如果返回对象，尝试提取imageUrl字段
					if (uploadRes.imageUrl) {
						finalImageUrl = uploadRes.imageUrl
					} else if (uploadRes.data && typeof uploadRes.data === 'string') {
						// 如果对象中有data字段且是字符串
						finalImageUrl = uploadRes.data
					} else {
						console.error('上传返回的对象格式不正确:', uploadRes)
						throw new Error('上传返回的数据格式错误')
					}
				} else {
					console.error('上传返回的不是字符串或对象:', uploadRes)
					throw new Error('上传返回的数据格式错误')
				}
				
				// 设置到表单
				this.formData.imageUrl = finalImageUrl
				console.log('设置到表单的图片URL:', this.formData.imageUrl)
				
				uni.hideLoading()
				uni.showToast({
					title: '图片上传成功',
					icon: 'success'
				})

			} catch (e) {
				uni.hideLoading()
				console.error('图片上传失败:', e)
				uni.showToast({
					title: e.message || '图片上传失败',
					icon: 'none'
				})
			}
		},

		// 提交表单
		async submitForm() {
			// 表单验证
			if (!this.formData.dateStr) {
				uni.showToast({
					title: '请选择日期',
					icon: 'none'
				})
				return
			}

			if (this.formData.classIndex < 0) {
				uni.showToast({
					title: '请选择班级',
					icon: 'none'
				})
				return
			}

			if (!this.formData.imageUrl) {
				uni.showToast({
					title: '请选择图片',
					icon: 'none'
				})
				return
			}

			this.submitting = true
			try {
				// 构造日期时间字符串 (yyyy-MM-dd HH:mm:ss)
				const dateTimeStr = `${this.formData.dateStr} 08:00:00`
				const token = uni.getStorageSync('token')

				if (this.isEdit) {
					// 编辑课程安排
					const updateData = {
						id: this.editingId,
						week: this.formatDateTimeForApi(dateTimeStr),
						imageUrl: this.formData.imageUrl,
						classId: this.formData.classId
					}

					const response = await apiRequest({
						url: getApiUrl(API_CONFIG.ENDPOINTS.COURSE_SCHEDULE_UPDATE),
						method: 'PUT',
						data: updateData,
						header: {
							'Authorization': token,
							'Content-Type': 'application/json'
						}
					})

					if (response.code === 200) {
						uni.showToast({
							title: '编辑成功',
							icon: 'success'
						})
					} else {
						throw new Error(response.message || '编辑失败')
					}
				} else {
					// 添加课程安排
					const formattedDate = this.formatDateTimeForApi(dateTimeStr)
					const queryParams = `date=${encodeURIComponent(formattedDate)}&imageUrl=${encodeURIComponent(this.formData.imageUrl)}&classId=${this.formData.classId}`
					
					console.log('添加课程安排，日期格式：', formattedDate)
					
					const response = await apiRequest({
						url: `${getApiUrl(API_CONFIG.ENDPOINTS.COURSE_SCHEDULE_ADD)}?${queryParams}`,
						method: 'POST',
						header: {
							'Authorization': token,
							'Content-Type': 'application/json'
						}
					})

					if (response.code === 200) {
						uni.showToast({
							title: '上传成功',
							icon: 'success'
						})
					} else {
						throw new Error(response.message || '上传失败')
					}
				}

				this.closeUploadModal()
				this.loadCourseList()
			} catch (error) {
				console.error('提交失败:', error)
				uni.showToast({
					title: error.message || '操作失败',
					icon: 'none'
				})
			} finally {
				this.submitting = false
			}
		},

		// 编辑课程
		editCourse(course) {
			this.isEdit = true
			this.editingId = course.id

			// 从日期中提取日期部分
			const date = new Date(course.week)
			const dateStr = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`

			// 找到对应的班级索引
			const classIndex = this.classOptions.findIndex(item => item.id === course.classId)

			this.formData = {
				dateStr: dateStr,
				imageUrl: course.imageUrl,
				classIndex: classIndex,
				classId: course.classId
			}
			this.showModal = true
		},

		// 预览图片
		previewImage(course) {
			const imageUrl = this.getImageUrl(course.imageUrl)
			if (!imageUrl) {
				uni.showToast({
					title: '暂无图片',
					icon: 'none'
				})
				return
			}
			
			uni.previewImage({
				urls: [imageUrl],
				current: imageUrl
			})
		},

		// 删除课程
		async deleteCourse(id) {
			uni.showModal({
				title: '确认删除',
				content: '确定要删除这个课程安排吗？',
				success: async (res) => {
					if (res.confirm) {
						try {
							const token = uni.getStorageSync('token')
							const response = await apiRequest({
								url: getApiUrl(`${API_CONFIG.ENDPOINTS.COURSE_SCHEDULE_DELETE}/${id}`),
								method: 'DELETE',
								header: {
									'Authorization': token,
									'Content-Type': 'application/json'
								}
							})

							if (response.code === 200) {
								uni.showToast({
									title: '删除成功',
									icon: 'success'
								})
								this.loadCourseList()
							} else {
								throw new Error(response.message || '删除失败')
							}
						} catch (error) {
							console.error('删除失败:', error)
							uni.showToast({
								title: error.message || '删除失败',
								icon: 'none'
							})
						}
					}
				}
			})
		},

		// 图片加载错误处理
		onImageError(e) {
			console.error('图片加载失败:', e)
		},

		// 获取图片URL，处理临时路径
		getImageUrl(url) {
			// 如果URL为空或不是字符串，返回空字符串
			if (!url || typeof url !== 'string') {
				return ''
			}
			
			// 检查是否是临时路径
			if (url.includes('tmp/') || url.includes('http://tmp/') || url.includes('__tmp__/')) {
				console.warn('检测到临时路径图片URL:', url)
				return ''
			}
			
			// 如果已经是完整URL，检查是否需要替换localhost
			if (url.startsWith('http://') || url.startsWith('https://')) {
				if (url.includes('localhost:8080')) {
					return url.replace('http://localhost:8080', API_CONFIG.BASE_URL)
				}
				return url
			}
			
			// 如果是相对路径（以/开头），转换为完整的服务器URL
			if (url.startsWith('/')) {
				return `${API_CONFIG.BASE_URL}${url}`
			}
			
			// 其他情况，尝试添加基础URL
			return `${API_CONFIG.BASE_URL}/${url}`
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: #0B0F1A;
	padding: 40rpx;
}

.header-section {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 40rpx;
	
	.header-info {
		.header-title {
			display: block;
			font-size: 48rpx;
			color: #FFFFFF;
			font-weight: bold;
			margin-bottom: 8rpx;
		}
		
		.header-subtitle {
			font-size: 28rpx;
			color: #AAB4BE;
		}
	}
	
	.header-actions {
		display: flex;
		gap: 20rpx;
		
		.upload-btn, .refresh-btn {
			background: #1a1f2e;
			border: 1rpx solid #2a2f3e;
			color: #FFFFFF;
			font-size: 28rpx;
			padding: 16rpx 24rpx;
			border-radius: 12rpx;
		}
	}
}

.filter-section {
	background: #1a1f2e;
	border: 1rpx solid #2a2f3e;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	
	.filter-item {
		display: flex;
		align-items: center;
		
		.filter-label {
			font-size: 28rpx;
			color: #FFFFFF;
			margin-right: 20rpx;
		}
		
		.picker-display {
			background: #2a2f3e;
			border: 1rpx solid #3a3f4e;
			border-radius: 8rpx;
			padding: 16rpx;
			font-size: 26rpx;
			color: #FFFFFF;
			min-width: 200rpx;
		}
	}
}

.course-list {
	.list-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		
		.list-title {
			font-size: 32rpx;
			color: #FFFFFF;
			font-weight: 500;
		}
		
		.list-count {
			font-size: 26rpx;
			color: #AAB4BE;
		}
	}
}

.course-item {
	background: #1a1f2e;
	border: 1rpx solid #2a2f3e;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	
	.course-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		
		.course-info {
			.course-week {
				display: block;
				font-size: 32rpx;
				color: #FFFFFF;
				font-weight: 500;
				margin-bottom: 8rpx;
			}
			
			.course-time {
				display: block;
				font-size: 24rpx;
				color: #AAB4BE;
				margin-bottom: 4rpx;
			}
			
			.course-class {
				font-size: 24rpx;
				color: #2196F3;
			}
		}
		
		.course-actions {
			display: flex;
			gap: 12rpx;
			
			.action-btn {
				padding: 12rpx 20rpx;
				border-radius: 8rpx;
				font-size: 24rpx;
				border: none;
				
				&.preview-btn {
					background: #2196F3;
					color: #FFFFFF;
				}
				
				&.edit-btn {
					background: #FF9800;
					color: #FFFFFF;
				}
				
				&.delete-btn {
					background: #F44336;
					color: #FFFFFF;
				}
			}
		}
	}
	
	.course-preview {
		.course-image {
			width: 100%;
			height: 300rpx;
			border-radius: 12rpx;
			background: #2a2f3e;
		}
		.no-image {
			width: 100%;
			height: 300rpx;
			border-radius: 12rpx;
			background: #2a2f3e;
			display: flex;
			align-items: center;
			justify-content: center;
			.no-image-text {
				font-size: 28rpx;
				color: #AAB4BE;
			}
		}
	}
}

.loading-state {
	text-align: center;
	padding: 100rpx 0;
	
	.loading-text {
		font-size: 28rpx;
		color: #AAB4BE;
	}
}

.empty-state {
	text-align: center;
	padding: 100rpx 0;
	
	.empty-icon {
		font-size: 80rpx;
		margin-bottom: 20rpx;
	}
	
	.empty-title {
		display: block;
		font-size: 32rpx;
		color: #FFFFFF;
		margin-bottom: 12rpx;
	}
	
	.empty-desc {
		font-size: 26rpx;
		color: #AAB4BE;
	}
}

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.modal-content {
	background: #1a1f2e;
	border: 1rpx solid #2a2f3e;
	border-radius: 16rpx;
	padding: 40rpx;
	margin: 40rpx;
	max-width: 600rpx;
	width: 100%;
	max-height: 80vh;
	overflow-y: auto;
	
	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		
		.modal-title {
			font-size: 36rpx;
			color: #FFFFFF;
			font-weight: bold;
		}
		
		.close-btn {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			background: #666;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.close-icon {
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
	}
	
	.form-item {
		margin-bottom: 30rpx;
		
		.label {
			display: block;
			font-size: 28rpx;
			color: #FFFFFF;
			font-weight: 500;
			margin-bottom: 12rpx;
		}
		
		.date-picker, .picker-display {
			width: 100%;
			background: #2a2f3e;
			border: 1rpx solid #3a3f4e;
			border-radius: 8rpx;
			padding: 16rpx;
			font-size: 26rpx;
			color: #FFFFFF;
		}
		
		.form-tip {
			display: block;
			font-size: 22rpx;
			color: #AAB4BE;
			margin-top: 8rpx;
		}
	}
	
	.upload-section {
		.section-title {
			display: block;
			font-size: 28rpx;
			color: #FFFFFF;
			font-weight: 500;
			margin-bottom: 20rpx;
		}
		
		.upload-area {
			border: 2rpx dashed #3a3f4e;
			border-radius: 12rpx;
			padding: 60rpx 20rpx;
			text-align: center;
			
			.upload-icon {
				display: block;
				font-size: 60rpx;
				margin-bottom: 16rpx;
			}
			
			.upload-text {
				display: block;
				font-size: 28rpx;
				color: #FFFFFF;
				margin-bottom: 8rpx;
			}
			
			.upload-tip {
				font-size: 22rpx;
				color: #AAB4BE;
			}
		}
		
		.image-preview {
			.preview-image {
				width: 100%;
				height: 300rpx;
				border-radius: 12rpx;
				margin-bottom: 16rpx;
			}
			
			.image-actions {
				text-align: center;
				
				.change-btn {
					background: #1976D2;
					color: #FFFFFF;
					border: none;
					border-radius: 8rpx;
					padding: 12rpx 24rpx;
					font-size: 26rpx;
				}
			}
		}
	}
	
	.modal-footer {
		display: flex;
		gap: 20rpx;
		margin-top: 30rpx;
		
		.cancel-btn, .submit-btn {
			flex: 1;
			padding: 20rpx;
			border-radius: 12rpx;
			font-size: 28rpx;
			border: none;
		}
		
		.cancel-btn {
			background: #666;
			color: #FFFFFF;
		}
		
		.submit-btn {
			background: #1976D2;
			color: #FFFFFF;
			
			&:disabled {
				background: #555;
				color: #999;
			}
		}
	}
}
</style> 